<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue基础-回顾</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-bind: 属性绑定,简写为 : -->
        <!-- v-on: 事件绑定,简写为 @ -->
        <h1 :title:id="id" @click="clickh1">{{name}}++{{jname}}</h1>
        <p :style="styleList"> 出生日期: {{birthdate | dateFormat}}</p>
        <p :style="styleObj"> 年龄: {{age}}</p>
        <p :class="classList">年龄: {{age}}</p>
        <p :class="classObj">年龄: {{age}}</p>
    </div>
    <script>
        // 新建一个Vue对象
        // el: element, Vue对象的作用范围
        // data: 数据, Vue对象需要用到的数据
        var app = new Vue({
            el: '#app',
            data: {
                name: '两只老虎两只老虎跑得快跑得快',
                jname: '不正经不正经',
                id: '1001',
                birthdate: new Date(1994, 11, 29),
                classObj: {
                    red: false,
                    big: true
                },
                classList: ['red', 'big'],
                styleObj: {
                    color: 'red',
                    border: '1px solid black'
                },
                styleList: [{
                        color: 'red',
                        border: '1px solid black'
                    },
                    {
                         backgroundColor: 'blue',
                        'border-radius': '10px',
                    }
                ]
            },
            // 计算属性: 会缓存计算结果,
            // 之后使用这个属性时会使用之前缓存的结果;
            // 直到计算中涉及的this的数据发生变化的时候才会重新计算
            computed: {
                age: function () {
                    console.log('执行age的get方法');

                    var year = this.birthdate.getFullYear();
                    var now = new Date();
                    var nowYear = now.getFullYear();
                    return nowYear - year;

                }
            },

            // 过滤器
            filters: {
                dateFormat: function (value) {
                    var year = value.getFullYear();
                    var month = value.getMonth() + 1;
                    var date = value.getDate();
                    var hour = value.getHours();
                    var minute = value.getMinutes();
                    var second = value.getSeconds();
                    var str = year + '/' + month + '/' + date + '' + hour + ':' + minute + ':' + second;

                    return str;
                }
            },

            methods: {
                clickh1: function () {
                    alert('h1被点击了');
                    app.name = "kangkang";
                    app.jname = "一江春水向东流"
                }
            },
            // 生命周期函数
            created: function () {
                console.log(' created 新建一个Vue对象');
            },
            mounted: function () {
                console.log('mounted vue实例挂载在dom上');
            },
            updated: function () {
                console.log('updated vue实例更新了');
            },
            destroyed: function () {
                console.log('destroyed vue实例销毁了');
            },
            // 监视
            watch: {
                name: function (value) {
                    console.log('name变化了');
                    console.log(value);
                    
                    console.log('name的新值是' + value);
                }
            }

        })
    </script>
</body>

</html>